<template>
    <div class="login-box">
        <Card class="login-card" :padding="0" :bordered="false">
            <div class="card-header"><img src="~@/assets/img/logo.png" alt="" /></div>
            <Form class="login-form" ref="loginForm" :model="loginData" :rules="ruleLogin" :label-width="60">
                <FormItem label="帐号：" prop="userName">
                    <Input type="text" v-model="loginData.userName" placeholder="请输入帐号" @on-enter="signIn('loginForm')"></Input>
                </FormItem>
                <FormItem label="密码：" prop="passWord">
                    <Input type="password" v-model="loginData.passWord" placeholder="请输入密码" @on-enter="signIn('loginForm')"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" :loading="isLogin" @click="signIn('loginForm')">登录</Button>
                </FormItem>
            </Form>
        </Card>
    </div>
</template>
<script>
export default {
  data() {
    return {
      isLogin: false,
      loginData: {
        username: "",
        password: "",
      },
      ruleLogin: {
        userName: [{ required: true, message: "请输入帐号" }],
        passWord: [{ required: true, message: "请输入密码" }]
      },
      permission:[
				    {  
				        permission_parent_name: "用户档案",
				        permission_parent_url: "user",
				        permission_child: [
				        	{ permission_child_url: "/user/personal", permission_child_name: "用户信息" }
				        ]
				    },
				    {
				    	permission_parent_name: "用户监测",
				        permission_parent_url: "customer",
				        permission_child: [
				        	{ permission_child_url: "/customer/bloodsugar", permission_child_name: "用户血糖" },
				        	{ permission_child_url: "/customer/bloodpressure", permission_child_name: "用户血压" },
				        	{ permission_child_url: "/customer/weight", permission_child_name: "用户体重" }
				        ]
				    },
				    {
				    	permission_parent_name: "病历管理",
				        permission_parent_url: "case",
				        permission_child: [
				        	{ permission_child_url: "/case/info", permission_child_name: "病历信息" }
				        ]
				    },
				    {
				    	permission_parent_name: "修改图片",
				        permission_parent_url: "improve",
				        permission_child: [
				        	{ permission_child_url: "/improve/info", permission_child_name: "修改图片" },
//				        	{ permission_child_url: "/improve/analysis", permission_child_name: "病历分析及管理目标" },
//				        	{ permission_child_url: "/improve/plan", permission_child_name: "干预计划" },
//				        	{ permission_child_url: "/improve/life", permission_child_name: "生活方式及改善建议" }
				        ]
				    },
				    {
				    	permission_parent_name: "在线咨询",
				    	permission_child: [
				    		{ permission_child_url: "/consultation/index", permission_child_name: "在线咨询" },
				    	]
				    }
				]

    };
  },
  methods: {
    // 登录
    signIn(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          localStorage.clear();
          this.isLogin = true;
          this.$http
            .post("http://192.168.6.87:8082/sso/login", this.loginData)
            .then(({data})=>{
            	console.log(data)
            	if (data.status === "success") {
            		localStorage.setItem('token', data.data.token)  //  存储 token
            		localStorage.setItem("sidebarnav", JSON.stringify(this.permission))
            		localStorage.setItem("user_id",data.data.user_id);   // 用户id
	                this.$Message.success("登录成功!");
	                this.isLogin = false;
	                this.$router.push("/home");
	            } else {
					this.$Notice.error({ title: "用户名或密码错误,登录失败!" });
	                this.isLogin = false;
	            }
            })
            .catch(function(err) {
              console.log(err);
              this.$Notice.error({ title: "登录失败!" });
              this.isLogin = false;
            });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.login-box {
  width: 100%;
  height: 100%;
  background: url("~@/assets/img/background.png") no-repeat center;
  background-size: cover;

  .login-card {
    width: 360px;
    position: absolute;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);

    .card-header {
      padding: 14px 0;

      img {
        display: block;
        margin: 10px auto 0;
    	height: 46px;
      }
    }

    .login-form {
      padding: 20px 20px 0;
    }
  }
}
</style>
